import React, { Component } from 'react';
import { Text, View, TouchableOpacity, PanResponder } from 'react-native';
import Svg, { Path } from "react-native-svg";

let marginY = 50 + 15 + 5
let marginX = 15 + 5
export default class WritePad extends Component {
  constructor(props) {
    super(props);
    this.allPoint = ''
    this.state = {
      drawPath: ''
    }
  }

  UNSAFE_componentWillMount() {
    this._panResponderDrawLine = PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
      onPanResponderGrant: (evt, gestureState) => {
        let tempfirstX = evt.nativeEvent.pageX.toFixed(0) - marginX;
        let tempFirstY = evt.nativeEvent.pageY.toFixed(0) - marginY;
        this.firstPoint = ' M' + tempfirstX + ' ' + tempFirstY;
        this.allPoint += this.firstPoint;
      },

      onPanResponderMove: (evt, gestureState) => {
        let pointX = evt.nativeEvent.pageX.toFixed(0) - marginX;
        let pointY = evt.nativeEvent.pageY.toFixed(0) - marginY;
        let point = ' L' + pointX + ' ' + pointY;
        this.allPoint += point;
        let drawPath = this.allPoint;
        this.setState({
          drawPath
        });
      },
      onPanResponderTerminationRequest: (evt, gestureState) => true,
      onPanResponderRelease: (evt, gestureState) => {

      },
      onPanResponderTerminate: (evt, gestureState) => {

      },
      onShouldBlockNativeResponder: (evt, gestureState) => {
        return true;
      },
    })
  }

  render() {
    const { style } = this.props;
    const { drawPath } = this.state;
    return (
      <View style={[{ backgroundColor: '#f5f6fa', padding: 5, minHeight: 200 }, style]}>
        <View style={{ flex: 1 }} {...this._panResponderDrawLine.panHandlers}>
          <View style={{ height: '100%', width: '100%', position: 'absolute', alignContent: 'center', alignItems: 'center', alignSelf: 'center', justifyContent: 'center' }}>
            {drawPath.length == 0 && <Text style={{ color: 'gray', height: 50 }}>在此处书写</Text>}
          </View>
          <Svg height="100%" width="100%">
            <Path d={this.state.drawPath} fill="none" stroke="black" strokeWidth={5} />
          </Svg>
        </View>
        <View style={{ marginLeft: 15, marginRight: 15, height: 0.5, backgroundColor: 'gray' }} />
        <TouchableOpacity onPress={() => { this.setState({ drawPath: '' }); this.allPoint = '' }} style={{ height: 50, alignItems: 'flex-end', justifyContent: 'center', marginRight: 15 }}>
          <Text style={{ fontSize: 16, color: '#5555ff' }}>清空</Text>
        </TouchableOpacity>
      </View>
    );
  }
}